<style>
    .edit .ant-form-item-control{
        line-height: 100%;
    }
    .img img{
        width: 50px;
        height: 50px;
    }
    .spec-list .ant-table table{
        border-left: 1px solid #e2e2e2;
    }
    .spec-list .info{
        margin-left:10px;
        text-align: left;
        line-height: 1.8;
    }
    .spec-list .goods div{
        float: left;
    }
</style>
<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label="活动标题" v-bind="formItemLayout">
                    <a-input placeholder='请输入活动标题' v-decorator="['title',{rules: [{ required: true, message: '活动标题不能为空!' }]}]" style="width: 100%"/>
                </a-form-item>
                <a-form-item label="活动内容" v-bind="formItemLayout" class="edit">
                    <edit :content.sync="model.content" @result="updateContent"></edit>
                    <a-input v-decorator="['content',{rules: [{ required: true, message: '活动内容不能为空!' }]}]" type="hidden" />
                </a-form-item>
                <a-form-item :wrapperCol="{span:8,offset: 5}">
                    <a-button type='primary'  :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {save,findDetail} from "../../api/activity";
    import Edit from '../../components/editor/index';

    export default {
        components: {Edit},
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                params:{
                    id:0,
                },
                bntLoading:false,
                model:{content:''}
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:16 },
                } : {}
            },
        },
        methods:{
            updateContent(r){
                this.form.setFieldsValue({'content': r});
            },
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let form = {...this.model,...data}
                let resp = await save(form);
                this.spinning = false;
                let _this = this;
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.$router.push({name:'ActivityList'});}
                    });
                }else{
                    this.$message.error(resp.msg||'保存失败')
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.params.id == 0) return false;
                this.spinning = true;
                let resp = await findDetail(this.params.id);
                if(this.qUtil.validResp(resp)){
                    this.model = resp.data.model;
                    const {title,content} = resp.data.model;
                    this.form.setFieldsValue({title,content});
                }
                this.spinning = false;
            }
        },
        mounted(){
            this.params.id = this.$route.query.id;
            this.onLoad();
        },
    }
</script>